<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <!-- <FormItem
              type="remoteSelect"
              prop="parentId"
              label="上级菜单"
              v-model="baTable.form.items!.parentId"
              placeholder="请选择"
              :input-attr="{
                params: { isTree: true },
                field: 'menuName',
                'remote-url': baTable.api.actionUrl.get('list'),
              }"
            /> -->
          <el-form-item label="材料名称" prop="fileName">
            <el-input
              v-model="baTable.form.items!.fileName"
              placeholder="请输入材料名称"
            />
          </el-form-item>
          <FormItem
            label="缓存"
            v-model="baTable.form.items!.isNecessary"
            type="radio"
            prop="isNecessary"
            :data="{
              content: { '0': '辅助', '1': '必备' },
              childrenAttr: { border: true },
            }"
          />
          <el-form-item label="序号" prop="orderNumber">
            <el-input
              v-model="baTable.form.items!.orderNumber"
              type="number"
              placeholder="序号"
            ></el-input>
            <div class="block-help">序号不能重复</div>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          {{ baTable.form.operate === "itemAdd" ? "确定并新增下一项" : "确定" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";
import FormItem from "@/components/formItem/index.vue";

const formRef = ref<InstanceType<typeof ElForm>>();
const baTable = inject("baTable") as baTableClass;

const rules = reactive<FormRules>({
  fileName: [{ required: true, message: "材料名称不能为空", trigger: "blur" }],
  isNecessary: [{ required: true, message: "状态不能为空", trigger: "blur" }],
  orderNumber: [{ required: true, message: "序号不能为空", trigger: "blur" }],
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
